
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sign</title>
    <link rel="stylesheet" href="../css/regeister2.css">
</head>

<body class="parcel sign">
<div class="loginTop">
    <div class="container">
        <a href="">
            <img src="../images/logo.png" alt="">
        </a>
    </div>
</div>
<section>
    <div class="container">
        <div class="step">
            <div class="item active">
                <strong index="1">Verification</strong>
            </div>
            <div class="item">
                <strong index="2">Information</strong>
            </div>
            <div class="item">
                <strong index="3">Complete</strong>
            </div>
        </div>
        <div class="form">
            <div class="step-content active">
                <div class="item">
                    <div class="name">
                        <label for="email">Email</label>
                    </div>
                    <div class="ctx">
                        <div class="input">
                            <input type="email" name="email" id="email">
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="name">
                        <label for="verification">Verification</label>
                    </div>
                    <div class="ctx">
                        <div class="code">
                            <input type="text" name="verification" id="verification">
                            <div class="verification">
                                verification
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="name">
                    </div>
                    <div class="ctx">
                        <div class="check">
                            <div class="box">
                                <input type="checkbox" name="q1" id="q1">
                            </div>
                            <label for="q1">
                                Upon creating my account,I agree to:
                                <br> - The
                                <a href="javascript:void(0)">Alibaba.com User Agreement</a>
                                <br> - Receive emails related to Alibaba.com membership and services
                            </label>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="name">
                    </div>
                    <div class="ctx">
                        <input type="hidden" name="step" value="1" class="step1">
                        <button type="button" id="next1">Next</button>
                    </div>
                </div>
            </div>
            <div class="step-content">
                <div class="item">
                    <div class="name">
                        <label>Username</label>
                    </div>
                    <div class="ctx">
                        <strong></strong>
                    </div>
                </div>
                <div class="item">
                    <div class="name">
                        <label for="password">Password</label>
                    </div>
                    <div class="ctx">
                        <div class="input">
                            <input type="password" name="password" id="password"><span style="padding:5px;font-size:16px;">*<span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="name">
                        <label for="c-password">Confirm password</label>
                    </div>
                    <div class="ctx">
                        <div class="input">
                            <input type="password" name="c-password" id="c-password"><span style="padding:5px;font-size:16px;">*<span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="name">
                        <label for="location">Location</label>
                    </div>
                    <div class="ctx">
                        <div class="input">
                            <input type="text" name="location" id="location">
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="name">
                        <label for="tp">I am a</label>
                    </div>
                    <div class="ctx">
                        <div class="radio">
                            <input type="radio" id="tp1" name="position" value="Supplier">
                            <label for="tp1">Supplier</label>
                            <input type="radio" id="tp2" name="position" value="Buyer">
                            <label for="tp2">Buyer</label>
                            <input type="radio" id="tp3" name="position" value="Both">
                            <label for="tp3">Both</label>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="name">
                        <label for="company">Company name</label>
                    </div>
                    <div class="ctx">
                        <div class="input">
                            <input type="text" name="company" id="company">
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="name">
                        <label for="tel">Tel</label>
                    </div>
                    <div class="ctx">
                        <div class="input">
                            <input type="tel" name="tel" id="tel">
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="name">
                    </div>
                    <div class="ctx">
                        <input type="hidden" name="step" value="2" class="step2">
                        <button type="button" id="next2">Confirm</button>
                    </div>
                </div>
            </div>
            <div class="step-content">
                <div class="info">
                    Congratulations on your successful registration. Please remember your account name and password.
                    <br>
                    <a href="../html/login.html">Login In</a>
                </div>
            </div>
        </div>
    </div>
</section>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/layer.js"></script>
<script src="../js/login.js"></script>
<script>
    $(function(){
        //获取手机验证码
        $(".verification").click(function(){
            var email = $("#email").val();
            if(email == "" || email.search(/^[0-9a-zA-Z]+@[0-9a-zA-Z]+\.[com]/) == -1){
                layer.tips('邮件不能为空或格式错误！', '#email',{tips:3});
                return;
            }
//            $.post('',{email:email,type:'sign'},function(re){
//                if(re.code == "all"){
//                    layer.msg(re.msg , {time:1000});
//                }else{
//                    layer.tips(re.msg, '#'+re.code,{tips:3});
//                }
//            })
        })
        //下一步
        $("#next1").click(function(){
            var q1 = $("input[name='q1']:checked").val();
            if(q1 != "on"){
                layer.tips('阅读后请勾选！', '#q1',{tips:3});
                return;
            }
            var email = $("#email").val();
            var verification = $("#verification").val();
            var step = $(".step1").val();
            $.post('',{email:email,verification:verification,step:step},function(re){
                $(".item").eq(0).removeClass("active");
                $(".item").eq(1).addClass('active');
                $(".ctx strong").html(email);
                $(".step-content").eq(0).removeClass("active");
                $(".step-content").eq(1).addClass("active");
//                if(re == "success"){
//                    $(".item").eq(0).removeClass("active");
//                    $(".item").eq(1).addClass('active');
//                    $(".ctx strong").html(email);
//
//                    $(".step-content").eq(0).removeClass("active");
//                    $(".step-content").eq(1).addClass("active");
//                }else{
//                    layer.tips(re.msg, '#'+re.code,{tips:3});
//                }
            })
        })
        //再下一步
        $("#next2").click(function(){
            var email = $("#email").val();
            var step  = $(".step2").val();
            var pwd   = $("#password").val();
            var repwd = $("#c-password").val();
            var address = $("#location").val();
            var company = $("#company").val();
            var tel = $("#tel").val();
            var position = $("input[name='position']:checked").val();

            if(pwd == "" || pwd.search(/^[0-9a-zA-Z]{6,18}/) == -1){
                layer.tips('密码格式错误，6到16位数字字母组合', '#password',{tips:3});
                return;
            }
            if(repwd == "" || pwd != repwd){
                layer.tips('二次密码不一致', '#c-password',{tips:3});
                return;
            }
            $.post('',{email:email,password:pwd,repassword:repwd,step:step,position:position,tel:tel,company:company,address:address,type:'sign'},function(re){
//                if(re == "success"){
//                    $(".item").eq(1).removeClass("active");
//                    $(".item").eq(2).addClass('active');
//
//                    $(".step-content").eq(1).removeClass("active");
//                    $(".step-content").eq(2).addClass("active");
//                }else{
//                    layer.tips(re.msg, '#'+re.code,{tips:3});
//                }
                $(".item").eq(1).removeClass("active");
                $(".item").eq(2).addClass('active');

                $(".step-content").eq(1).removeClass("active");
                $(".step-content").eq(2).addClass("active");
            })
        })
    })
</script>
</body>

</html>
